<template>
    <div>
        <el-card class="box-card">
            <!-- 添加球员表单 -->
            <el-form :model="playerForm" inline @submit.native.prevent="handleAddPlayer" id="add_player_form" style="width:100%">
                <el-form-item  >
                    <el-input v-model="playerForm.name" placeholder="球员名称"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="playerForm.grade" placeholder="年级"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="playerForm.id" placeholder="球员号码"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="playerForm.institution" placeholder="院校"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="playerForm.major" placeholder="专业"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="playerForm.classes" placeholder="班级"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="playerForm.pos" placeholder="球员位置"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAddPlayer">添加球员</el-button>
                </el-form-item>
            </el-form>
            <!-- ...表格代码... -->
            <!-- 展示 -->
            <el-table :data="tableData" style="width: 100%" height="500">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="球员名称">
                                <span>{{ props.row.name }}</span>
                            </el-form-item>
                            <el-form-item label="年级">
                                <span>{{ props.row.grade }}</span>
                            </el-form-item>
                            <el-form-item label="球员号码">
                                <span>{{ props.row.id }}</span>
                            </el-form-item>
                            <el-form-item label="所属院校">
                                <span>{{ props.row.institution }}</span>
                            </el-form-item>
                            <el-form-item label="所属专业">
                                <span>{{ props.row.major }}</span>
                            </el-form-item>
                            <el-form-item label="班级">
                                <span>{{ props.row.classes }}</span>
                            </el-form-item>
                            <el-form-item label="球员描述">
                                <span>{{ props.row.desc }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="球员号码" prop="id">
                </el-table-column>
                <el-table-column label="球员名称" prop="name">
                </el-table-column>
                <el-table-column label="球员位置" prop="pos">
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" size="mini"
                            style="">
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: require("@/assets/jsonData/teamplayer.json"),
            playerForm: { // 新增球员的表单数据
                name: '',
                grade: '',
                id: '',
                institution: '',
                major: '',
                classes: '',
                pos: ''
            }
        };
    },
    methods: {
        handleDelete(row) {
            this.$confirm('此操作将永久删除该球员, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // this.$message({
                //     type: 'success',
                //     message: '删除成功!'
                // });
                const index = this.tableData.indexOf(row);
                if (index !== -1) {
                    this.tableData.splice(index, 1);
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleAddPlayer() {
            this.tableData.push({
                ...this.playerForm
            });
            this.playerForm = { // 清空表单
                name: '',
                grade: '',
                id: '',
                institution: '',
                major: '',
                classes: '',
                pos: ''
            };
            // 可以在这里添加额外的逻辑，比如发送数据到服务器
        }
    }
}
</script>
<style>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
#add_player_form .el-form-item{
    width: 10%;
    text-align: center
}
</style>